<template>
	<view class="register-container">
		<!-- 页面标题 -->
		<view class="register-title">
			<view>账号登录</view>
		</view>


		<!-- 手机号输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>

			<wd-input v-model="form.phone" show-word-limit placeholder="请输入手机号" type="number" :maxlength="11"
				input-align="left" class="input" @input="onPhoneInput" label="手机号" label-width="140rpx"></wd-input>
		</view>


		<!-- 密码输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="lock-off" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.password" placeholder="请设置密码（6-18位）" :maxlength="18" input-align="left"
				class="input flex-1" label="密码" label-width="140rpx" clearable show-password></wd-input>
		</view>



		<!-- 注册按钮 -->
		<view class="btn-register">
			<wd-button type="primary" block :loading="loading" :disabled="!canRegister" @click="loginHandle">
				登录
			</wd-button>
		</view>


		<!-- 已有账号 -->
		<view class="login-link">
			<text class="link" @click="newforgotPage">找回密码</text>
			<text class="link" @click="smsPage">短信登录</text>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	ref,
	computed,
	onBeforeUnmount,
	watch
} from 'vue'

import { loginByPassword } from "@/api/loginApi"

import {
	account_login
} from "@/api/user"

import {
	useRouter
} from 'uni-mini-router'

// 路由实例 - 保留原逻辑
const router = useRouter();
const newforgotPage = () => {
	router.replaceAll({
		name: "newforgot"
	})
}
const smsPage = () => {
	router.replaceAll({
		name: "sms_login"
	})
}

// 使用reactive管理表单数据
const form = reactive({
	phone: '',
	password: ''
})

const roleColumns = ref(['志愿者', '商务'])

// 其他响应式变量
const loading = ref(false)

// 验证码相关变量
const codeBtnText = ref('获取验证码')
const timer = ref(null)

// 计算属性 - 移除了同意条款的判断条件
const canSendCode = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.phone)
})

const canRegister = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.phone) &&
		form.password.length >= 6 &&
		form.password.length <= 18 &&
		!loading.value
})

// 方法定义
const onPhoneInput = () => {
	// 手机号输入处理
}



// 注册提交 - 移除了同意条款的验证
const loginHandle = async () => {
	if (loading.value) return

	if (form.password.length < 6 || form.password.length > 18) {
		uni.showToast({
			title: '密码长度应为6-18位',
			icon: 'none'
		})
		return
	}

	loading.value = true

	// 实际项目中请替换为真实注册接口调用

	// 请求参数调整为从 model 取值
	const param = {
		"mobile": form.phone,
		"password": form.password,
		ip: "192.168.1.1"
	};

	try {
		const res = await loginByPassword(param)
		if (res.code == 200) {
			console.log(200, res)
			uni.setStorage({
				key: 'userRole',
				data: 'doctor',
				success: function () {
					uni.reLaunch({
						url: "/pages/tabPage/mine"
					})

				}
			});
		}
	} catch (err) {
		console.log(err)
	}

}

// 跳转到登录页
const navigateToLogin = () => {
	router.replaceAll({
		name: "account_login"
	})
}



// 生命周期钩子
onBeforeUnmount(() => {
	if (timer.value) {
		clearInterval(timer.value)
	}
})
</script>

<style lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';

.register-container {
	padding: 80rpx 40rpx 0;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
}

.register-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 80rpx;
	text-align: center;
}

.input-item {
	border-bottom: 1px solid #e5e5e5;
	padding: 15rpx 0;
	margin-bottom: 10rpx;
	display: flex;

	.input-icon {
		flex: 0 0 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.code-item {
	display: flex;
	align-items: center;
	gap: 0rpx;
}


:deep(.wd-input.is-cell) {
	padding-left: 0rpx !important;
}

:deep(.wd-cell) {
	padding-left: 0rpx !important;
}

.wd-input {
	&::v-deep .wd-input__control {
		font-size: 30rpx;
		color: #333;
		height: 80rpx;
		line-height: 80rpx;
	}

	&::v-deep .wd-input__prefix-icon {
		font-size: 34rpx;
		color: #999;
		margin-left: 10rpx;
	}

	&::v-deep .wd-input__label {
		font-size: 30rpx;
		color: #333;
		text-align: left;
	}
}

.btn-code {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

.password-match {
	margin: 5rpx 0 30rpx 150rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	gap: 5rpx;
}

.match-success {
	color: #52c41a;
}

.match-error {
	color: #ff4d4f;
}

.btn-register {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	border-radius: 16rpx;
	margin: 40rpx 0;
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	display: flex;
	justify-content: space-between;
}

.link {
	color: #007aff;
}
</style>